import React, {PureComponent} from "react";
import dragIcon from "../assets/img/drag.png";
import {Input} from "antd";
import {List as VList, AutoSizer} from "react-virtualized";
import 'react-virtualized/styles.css';
import "./globalStyle.css";
import {connect} from "react-redux";

/**
 * 全局监控 车辆管理
 */
class CarRecordComponent extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            titles: ["正常", "充电中", "预警", "报警", "全部"],
            circleColors: ["#76a2ff", "#7ac76f", "#f5c22a", "#f3697c", "#bc8fff"]
        }
    }

    render() {


        const {titles, circleColors} = this.state;

        const {carMessageArray} = this.props;

        /**
         *
         * @param key Unique key within array of rows
         * @param index Index of row within collection
         * @param isScrolling  The List is currently being scrolled
         * @param isVisible  This row is visible within the List (eg it is not an overscanned row)
         * @param style  Style object to be applied to row (to position it)
         * @returns {*}
         */

        let warningStatusStyle;
        let warningText;

        let rideStatusStyle;
        let rideText;

        function rowRenderer({key, index, isScrolling, isVisible, style}) {

            const carEntity = carMessageArray.get(index);

            switch (carEntity.get("alarmStatus")) {
                case 1:  //正常
                    warningStatusStyle =null;
                    warningText="正常";
                    break;
                case 2:   //预警
                    warningStatusStyle ={color:"#edb553"};
                    warningText="预警中";
                    break;
                default:  // 报警
                    warningStatusStyle ={color:"#d5725b"};
                    warningText="报警中";
                    break;
            }

            const stopStatus = carEntity.get("stopStatus");

            rideStatusStyle = stopStatus === 0? null :{color:"#409EFF"};
            rideText = stopStatus === 0? "未骑行":"骑行中";

            return (


                //<div className="alarm-right">车主姓名:{{j.driverUserName}}</div>
                //                     <div className="alarm-right">电话:{{j.driverHandphone}}</div>
                //                     <div className="alarm-right">经度:{{j.longitude}}</div>
                //                     <div className="alarm-right">纬度:{{j.latitude}}</div>
                //                     <div className="alarm-right">车牌号:{{j.plateNumber}}</div>
                //                     <div className="alarm-right">终端编号:{{j.newTag}}</div>


                <div
                    style={{...carMessageItemRootStyle, ...style}}
                    key={key}>
                    <div style={carMessageItemStyle}>
                        车主姓名:&nbsp;{carEntity.get("driverUserName")}
                    </div>

                    <div style={carMessageItemStyle}>
                        电话:&nbsp;{carEntity.get("driverHandphone")}
                    </div>

                    <div style={carMessageItemStyle}>
                        经度:&nbsp;{carEntity.get("longitude")}
                    </div>

                    <div style={carMessageItemStyle}>
                        维度:&nbsp;{carEntity.get("latitude")}
                    </div>

                    <div style={carMessageItemStyle}>
                        车牌号:&nbsp;{carEntity.get("plateNumber")}
                    </div>

                    <div style={carMessageItemStyle}>
                        终端号:&nbsp;{carEntity.get("newTag")}
                    </div>

                    <div style={carMessageItemStyle}>
                        骑行状态:&nbsp;
                        <span style={rideStatusStyle}>{rideText}</span>
                    </div>

                    <div style={carMessageItemStyle}>
                        报警状态:&nbsp;
                        <span style={warningStatusStyle}>{warningText}</span>
                    </div>
                </div>


            )
        }


        return (
            <div style={carWrapperStyle}>
                <img style={carDragStyle} src={dragIcon} alt={"点击消失"}/>
                <div style={carItemRootStyle}>

                    <h4 style={carTitleStyle}>车辆管理</h4>

                    <div style={carStatusRootStyle}>
                        <ul style={carStatusUlStyle}>
                            {
                                titles.map((item, index) => {
                                    return (
                                        <li style={carStatusItemStyle} key={index}>
                                            <span
                                                style={{...carStatusItemSpanStyle, ...{backgroundColor: `${circleColors[index]}`}}}/>
                                            &nbsp;{item}
                                        </li>
                                    );
                                })
                            }

                        </ul>
                        <div style={carSearchWrapperStyle} className={"searchDiv"}>
                            <Input allowClear placeholder={"请输入姓名或者终端尾号"}/>
                        </div>
                    </div>


                    <AutoSizer style={{flex: 1}}>
                        {
                            ({height, width}) => (
                                <VList
                                    height={height}
                                    rowCount={carMessageArray.size}
                                    rowHeight={110}
                                    rowRenderer={rowRenderer}
                                    width={width}
                                    style={{height:"100%"}}
                                />
                            )
                        }
                    </AutoSizer>

                </div>
            </div>
        );
    }

}


const mapState = (status) => {
    return {
        carMessageArray: status.getIn(["globalReducer", "carsMessageArray"])
    }
};


export default connect(mapState, null)(CarRecordComponent);


const carWrapperStyle = {
    width: 300,
    position: "relative",
    height: "100%",
};


const carItemRootStyle = {
    width: 280,
    height: "100%",
    borderRadius: 4,
    marginLeft: 20,
    border: "1px solid #ccc",
    boxSizing: "border-box",

    overflow: "hidden",

    display: 'flex',
    flexDirection: "column",
};

const carDragStyle = {
    height: 20,
    width: 60,
    verticalAlign: "center",

    transaction: "all",
    transform: "rotate(90deg) translate(10px,20px)",

    position: "absolute",
    top: "50%",
    left: 0,
};

const carTitleStyle = {
    width: "100%",
    textAlign: "center",
    height: 40,
    lineHeight: "40px",
    backgroundColor: '#fafafa',
    borderBottom: "1px solid #ccc",
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    fontSize: 14,

};

const carStatusRootStyle = {
    borderBottom: "1px solid #ccc",

};

const carStatusUlStyle = {
    width: "100%",
    marginLeft: 8,
    height: 40,
    backgroundColor: "#fff",

};

const carStatusItemStyle = {
    float: 'left',
    fontSize: 12,
    lineHeight: "40px",
    textAlign: 'center',
    fontWeight: 500,
    marginRight: 12,
};

const carStatusItemSpanStyle = {
    display: "inline-block",
    height: 12,
    width: 12,
    verticalAlign: "center",
    marginTop: 1,
    borderRadius: "100%",
    backgroundColor: "red",
};

const carSearchWrapperStyle = {
    backgroundColor: '#fafafa',
    height: 40,
};

const carMessageItemRootStyle = {
    borderBottom: "1px solid #ccc",
    display: "flex",
    flexWrap: "wrap",
    paddingTop: 12,
};

const carMessageItemStyle = {
    width: "50%",
    fontSize: 12,
    textAlign: "start",
    boxSizing: 'border-box',
    padding: "0 0 6px 6px",
    whiteSpace: "nowrap",
    textOverflow: "ellipsis",
    wordBreak: "keep-all",
    overflow: "hidden",

};


